<template>
	<!-- 休闲零食 -->
	<view class="">
		<tabsTop tabName="休闲零食"></tabsTop>
		<mySearch class="searchClick" @click="searchClick()"></mySearch>
		<view class="w-100" style="height: 400rpx;">
			<image :src="Domain_ICON+'/lb.webp'" mode="" class="img"></image>
		</view>
		<view class="w-100" style="height: 300rpx;">
			<image :src="Domain_ICON+'/xxls.webp'" mode="" class="img"></image>
		</view>
		<!-- 休闲零食 -->
		<view class="product-list px-3 pt-1 pb-5" style="background-color: #000;">
			<view class="sign_row flex flex-wrap justify-between">
				<!-- 循环生成两个商品数据 -->
				<view class="bg-white mb-3 rounded-lg overflow-hidden" v-for="(item,index) in tableData" :key="index"
					style="width: 330rpx" @click="productClick(item.Article_Name,item.Article_SerialNumber,item.Sales_Unit_Price_SerialNumber,item.Store_SerialNumber)">
					<view class="w-100" style="height: 350rpx;">
						<image :src="Domain_IMG+item.Picture_URL" :alt="item.Article_Name" class="img"></image>
					</view>
					<view class="px-2">
						<view class="product-name pt-2 font-sm">{{item.Article_Name}}</view>
						<view class="flex justify-between py-3">
							<!-- 商品价格 -->
							<view class="flex align-center align-center">
								<view style="width: 28rpx; height: 28rpx;">
									<image :src="Domain_ICON+'/price.png'" mode="" class="img"></image>
								</view>
								<text style="color: green; font-size: 38rpx;line-height: 0;">{{item.specifications[0].Sales_Unit_Price}} </text>
							</view>
							<!-- 购物车字体 -->
							<view style="width: 35rpx; height: 35rpx;">
								<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<button class="font py-1" @click="ckClick()">查看更多</button>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<!-- <botSponsor bgColor="#cccccc50" bgHeight="350rpx"></botSponsor> -->
		<!-- 底部tab栏组件 -->
		<tabsBottom :tabId="0"></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import mySearch from "@/components/mysearch/mysearch.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue";
	import {GoodsIdAction} from '@/api/article.js';
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			mySearch,
			botSponsor,
		},
		data() {
			return {
				Domain_ICON:app.globalData.Domain_ICON,
				Domain_IMG:app.globalData.Domain_IMG,
				product: [{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
					{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
					{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
					{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
					{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
					{
						image: app.globalData.Domain_ICON+'/rice.webp',
						name: '七色糙米2.5kg/袋*1',
						price: 29.9
					},
				],
				tableData:[],
				total:0,
				form:{
					ShopColumn_Id: "",
					page: 1,
					limit: 10,
				},
				isReach:true
			}
		},
		onLoad(e) {
			this.form.ShopColumn_Id = e.ShopColumn_Id;
			this.GoodsIdAction(this.form);
		},
		onReachBottom(){//到底刷新数据
			if(this.isReach){//是否有剩余数据
				if (this.tableData.length < this.total) {
					this.form.page++;
					this.getData(this.form,true)
				} else {
					this.isReach = false;
				}
			}
		},
		methods: {
			searchClick() {
				// 点击搜索进入搜索页
				uni.navigateTo({
					//搜索页路径
					url: "./search",
				});
			},
			async GoodsIdAction(data, onReach = false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					const res = await GoodsIdAction(data);
					if(res.Status=='success'){
						//判断是否重新开始查询
						if(!onReach) {
							this.form.page = 1
							this.tableData = [];
						}
						this.tableData.push(...res.tableData);
						this.total = Number(res.limit);
					}
					uni.hideLoading();
					
					console.log(this.tableData );
					this.loading = false;
				}
			},
			
			// 点击商品,进入商品详情页
			productClick(name, Article_SerialNumber, Sales_Unit_Price_SerialNumber) {
				uni.navigateTo({
					url: "/pages/index/productDetails?name=" + name + "&Article_SerialNumber=" +
						Article_SerialNumber + "&Sales_Unit_Price_SerialNumber=" + Sales_Unit_Price_SerialNumber
				})
			},
			// 休闲零食查看更多,
			ckClick(){
				uni.navigateTo({
					url: "/pages/index/manygoods",
				});
			}
		}
	}
</script>

<style lang="scss">
	.product-price {
		color: #00aa00;
		font-weight: 700;
	}
</style>